<template>
  <!-- 路由跳转，传订单id， -->
  <div>
    <!-- 评价 -->
    <div class="mineConsumePopup">
      <div class="home">
        <van-nav-bar id="banner" left-arrow @click-left="onClickLeft">
          <template #title>
            <div style="color: grey">评价</div>
          </template>
        </van-nav-bar>
      </div>
      <div class="mineConsume">
        <van-cell-group inset>
          <van-cell center>
            <template #title>
              <div style="height: 50px; width: 100%; margin-top: 10px">
                <div style="height: 50px; width: 50px; float: left">
                  <van-image round width="50px" height="50px" :src="remakeData.avatar" />
                </div>
                <div style="height: 50px; width: 50%; margin-left: 20px;  float: left; ">
                  <div style="margin-top: 13px; margin-left: 7px; font-size: 17px">
                    <span>{{remakeData.name}}</span>
                  </div>
                </div>
              </div>
              <van-divider />
              <div style="height: 500px; width: 100%; ">
                <!-- 商品评分 -->
                <div style="height: 40px; width: 25%; float: left;">
                  <span>商品评分</span>
                </div>
                <div style="height: 40px; width: 50%;  float: left;">
                  <van-rate v-model="remakeData.foodScore" :size="25" color="#ffd21e" void-icon="star" void-color="#eee"
                    allow-half @change="onChangeRate" />
                </div>
                <div style="height: 40px; width: 15%; float: left; color:gold">
                  <span>{{ remakeData.foodScore }}</span>
                </div>
                <!-- 服务态度 -->
                <div style=" height: 40px; width: 25%; float: left;">
                  <span>服务态度</span>
                </div>
                <div style="height: 40px; width: 50%; float: left; ">
                  <van-rate v-model="remakeData.serviceScore" :size="25" color="#ffd21e" void-icon="star"
                    void-color="#eee" allow-half @change="onChangeRate" />
                </div>
                <div style=" height: 40px; width: 15%; float: left; color:gold">
                  <span>{{ remakeData.serviceScore }}</span>
                </div>
                <!-- 留言框 -->
                <div>
                  <van-field v-model="remakeData.remake" rows="5" autosize label="评价" type="textarea" maxlength="50"
                    placeholder="花钱吃____。" show-word-limit label-width="53px" />
                </div>
                <!-- 上传图片 -->
                <div>
                  <div style="width: 25%; float: left">
                    <span>上传图片</span>
                  </div>
                  <van-uploader v-model="fileList" preview-size="70px" :max-count="2" :after-read="afterRead"
                    :before-read="beforeRead" :before-delete="beforeDelete" />
                </div>
                <!-- 选择好评、中评、差评 -->
                <div style="height: 30px; width: 100%; margin-top: 15px">
                  <div style="height: 30px; width: 25%; float: left">
                    <span>商品评分</span>
                  </div>
                  <div style="height: 30px; width: 75%; float: left">
                    <van-radio-group v-model="selectType" direction="horizontal" @change="onChangeCommentType">
                      <van-radio name="1">好评</van-radio>
                      <van-radio name="2">中评</van-radio>
                      <van-radio name="3">差评</van-radio>
                    </van-radio-group>
                  </div>
                </div>
                <van-divider>好评哟♥❤</van-divider>
                <!-- 提交按钮 -->
                <div>
                  <van-button round type="primary" @click="onCommit">提交</van-button>
                </div>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    uploadOss
  } from "../../utils/uploadOss.js";
  import {
    Toast
  } from "vant";
  import request from "@/utils/request";
  export default {
    data() {
      return {
        fileList: [],
        prictureList: [],
        len: 0,
        order: {},
        selectType: 0,
        goodOrBad: ["好评", "中评", "差评"],

        // 评价页面数据，
        remakeData: {
          orderId: '',
          customerId: "",
          shopId: "",
          name: "",
          avatar: "",
          foodScore: 0,
          serviceScore: 0,
          remake: "",
          picture: "",
          goodOrBad: "",
        },
      };
    },
    computed: {},
    methods: {
      // 返回上一级
      onClickLeft() {
        this.$router.go(-1)
      },

      // 提交
      onCommit() {
        var picture = ""
        for (var i = 0; i < this.len; i++) {
          picture += this.prictureList[i]
          if (i == 0) picture += ","

        }
        this.remakeData.picture = picture;

        request.post("/schoolOrder/app/evaluate", {
          orderId: this.remakeData.orderId,
          customerId: this.remakeData.customerId,
          shopId: this.remakeData.shopId,
          name: this.remakeData.name,
          avatar: this.remakeData.avatar,
          foodScore: this.remakeData.foodScore,
          serviceScore: this.remakeData.serviceScore,
          remake: this.remakeData.remake,
          picture: this.remakeData.picture,
          goodOrBad: this.remakeData.goodOrBad,
          createTime: this.getCurretnTime() + "",
          createBy: this.remakeData.createBy
        }).then(
          res => {
            Toast("评价成功！")
            this.remakeData = {}
            this.fileList = []
            this.picture = ""
            this.len = 0
            sessionStorage.setItem('curActive', 1);
            this.$router.push("/manager/order")
          }
        )
      },
      /**
       * 获取当前时间
       */
      getCurretnTime() {
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        mm = mm.toString().padStart(2, 0);
        let dd = new Date().getDate().toString().padStart(2, 0);
        let hh = new Date().getHours().toString().padStart(2, 0);
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      },

      // 评分
      onChangeRate(x) {
        // Toast(x);
      },

      // 好评、中评、差评
      onChangeCommentType(index) {
        this.remakeData.goodOrBad = this.goodOrBad[(index - 0) - 1];
      },


      beforeDelete(file, detail) {
        var pos = detail.index
        for (var i = pos; i < this.len - 1; i++) {
          this.prictureList[i] = this.prictureList[i + 1];
        }
        this.len--;
        return true;
      },

      beforeRead(file) {
        //说明是一个文件
        if (typeof file.length === "undefined") {
          //说明是图片
          if (file.type.indexOf("image") != -1) {
            //开始上传
            Toast("正在上传中...");
            return true;
          } else {
            Toast("只能上传图片！");
          }
        } else {
          Toast("一次只能传一张图！！！");
        }

        return false;
      },

      // 上传凭证
      afterRead(file) {
        file.file.status = "uploading";
        file.file.message = "上传中...";
        this.overlayVisable = true;
        uploadOss(file.file, "schoolOrder").then((res) => {
          //这里即可拿到oss上传后的结果, res[].url
          //  console.log(res, "oss上传");
          if (res.length >= 1) {
            this.overlayVisable = false;
            Toast("上传成功");
            //  this.remakeData.picture = res[0].url;
            this.prictureList.push(res[0].url)
            this.len++;
          } else {
            this.overlayVisable = false;
            Toast("上传失败");
          }
        });
      },
    },
    mounted() {
    
      if (sessionStorage.getItem("RemakeOrder")) {
        this.order = JSON.parse(sessionStorage.getItem("RemakeOrder"))
        this.remakeData.customerId = this.order.customerId;
        this.remakeData.orderId = this.order.id;
        this.remakeData.shopId = this.order.shopId;
        this.remakeData.name = this.order.shopName;
        this.remakeData.createBy = this.order.createBy;
        this.remakeData.avatar = this.order.avatar;
      } else {
        this.$router.push("/")
      }
    },
  };
</script>

<style scoped>
  .home #banner {
    background-color: gold;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .mineConsume {
    padding-top: 5%;
    padding-bottom: 20px;
    background-color: rgb(248, 248, 248);
    height: 600px;

  }

  .van-button {
    background-color: gold;
    border: 0;
    width: 95%;
    box-sizing: border-box;
    margin-left: 2%;
  }
</style>